<template>
  <div style="width: 100%; height: 100%">
    <div ref="main2" id="main" style="width: 100%; height: 100%"></div>
    <div ref="pops">
      <div class="pops_contant" v-for="(item, index) in popsList" :key="index">
        <div class="pops_contant_left">
          <div class="rjqysr" :style="{ background: item.color }"></div>
          <div>{{ item.seriesName }}:</div>
        </div>

        <div class="popValue">{{ item.value }}万元</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
    },
  },
  data() {
    return {
      popsList: [],
    };
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      // let myChart = this.$echarts.init(document.getElementById("main"));
      let myChart = this.$echarts.init(this.$refs.main2);
      let pixelSeries = [];
      // 指定图表的配置项和数据
      let that = this;
      let option = {
        grid: {
          top: "25%",
          bottom: "15%", //也可设置left和right设置距离来控制图表的大小
          right: "10%",
          left: "10%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
            },
          },
          formatter: function (params) {
            that.popsList = params;
            return that.$refs.pops;
          },
        },
        legend: {
          type: "scroll",
          itemWidth: 10,
          itemHeight: 10,

          data: ["人均营业收入", "人均利润额", "人均纳税"],
          top: "5%",

          padding: [0, 0],
          itemGap: 23,
          textStyle: {
            color: "#FFFFFF",
          },
        },
        xAxis: {
          data: that.data.mon,
          axisLine: {
            show: true,
            // color:"red",
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#3AC2F9", //X轴文字颜色
            },
          },
        },
        yAxis: [
          {
            type: "value",
            name: "",
            scale: true,
            position: "left",
            nameTextStyle: {
              color: "#3AC2F9",
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#62779F",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#3AC2F9",
              },
            },
          },
          {
            type: "value",
            scale: true,
            name: "",
            nameTextStyle: {
              color: "#3AC2F9",
            },
            position: "right",
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#3AC2F9",
              },
            },
          },
        ],
        series: [
          {
            name: "人均纳税",
            type: "line",
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            showAllSymbol: true, //显示所有图形。
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 6, //标记的大小
            itemStyle: {
              //折线拐点标志的样式
              color: "#00ECFF",
              borderWidth: "2",
              borderColor: "#00ECFF",
            },
            lineStyle: {
              color: "#00ECFF",
            },
            data: that.data.rjnse,
          },
          {
            name: "人均营业收入",
            yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用

            type: "bar",
            barWidth: 10,
            itemStyle: {
              normal: {
                color: "#00CCF9",
              },
            },
            data: that.data.rjyysr,
          },
          {
            name: "人均利润额",
            yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            type: "bar",
            barWidth: 10,
            itemStyle: {
              normal: {
                color: "#B130EF",
              },
            },
            data: that.data.rjlre,
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped lang="scss">
.rjqysr {
  width: 10px;
  height: 10px;
  // background-color: aqua;
  border-radius: 50%;
  margin-right: 10px;
}
.pops_contant {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  align-items: center;
}
.popValue {
  color: #666666;
  font-weight: bold;
}
.pops_contant_left{
  display: flex;
  margin-right: 20px;
  }
</style>
